<template>

  <div class="pickerDemo">

    <div class="showTime" @click="selectData">

      {{this.selectedValue}}

    </div>

    <!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->

    <div class="pickerPop" @touchmove.prevent>

      <!-- 年月日时分选择 -->

      <mt-datetime-picker

        lockScroll="true"

        ref="datePicker"

        v-model="dateVal"

        class="myPicker"

        type="date"

        year-format="{value}"

        month-format="{value}"

        date-format="{value}"

        @confirm="dateConfirm()"

        :startDate="minStartDate"

        :endDate="maxEndDate"

      >

      </mt-datetime-picker>

    </div>

  </div>

</template>


<script>
  export default {

    name: 'date',

    data () {
      return {

        dateVal: '', // 默认是当前日期

        selectedValue: '',

        minStartDate: new Date(),

        maxEndDate: new Date()

      }
    },

    components: {},

    props: ['date', 'minDate', 'maxDate'],

    watch: {

      date (newval, oldval) {
        this.selectedValue = newval
      },

      minDate (newval, oldval) {
        if (this.minDate) {
          this.minStartDate = new Date(this.minDate.trim().substr(0, 10))
        } else {
          this.minStartDate = new Date(newDate.getFullYear() - 20 + '-01-01')
        }
      },

      maxDate (newval, oldval) {
        if (this.maxDate) {
          this.maxEndDate = new Date(this.maxDate.trim().substr(0, 10))
        } else {
          this.maxEndDate = new Date(newDate.getFullYear() + 20 + '-12-30')
        }
      }

    },

    created () {

    },

    mounted () {
      this.start()
    },

    methods: {

      start () {
        let newDate = new Date()

        if (this.minDate) {
          this.minStartDate = new Date(this.minDate.trim().substr(0, 10))
        } else {
          this.minStartDate = new Date(newDate.getFullYear() - 20 + '-01-01')
        }

        if (this.maxDate) {
          this.maxEndDate = new Date(this.maxDate.trim().substr(0, 10))
        } else {
          this.maxEndDate = new Date(newDate.getFullYear() + 20 + '-12-30')
        }

        if (this.date) {
          let newStart = this.date.substr(0, 10)

          this.selectedValue = newStart
        } else {
          this.selectedValue = this.dateYMD()
        }
      },

      dateYMD (a, b, c) {
        let yy = parseInt(a) || 0, mm = parseInt(b) || 0, dd = parseInt(c) || 0, date = new Date(), y = '', m = '',
          d = ''

        y = date.getFullYear() + yy + ''

        m = date.getMonth() + 1 + mm + ''

        let monthDate = this.mGetDate(y, m)

        if (dd < 0) {
          if (date.getDate() <= -dd) {
            m = m - 1 + ''

            let mDate = this.mGetDate(y, m)

            d = date.getDate() + mDate + dd + ''
          } else {
            d = date.getDate() + dd + ''
          }
        } else {
          if (date.getDate() + dd >= monthDate) {
            m = parseInt(m) + 1 + ''

            let mDate = this.mGetDate(y, m)

            d = date.getDate() - mDate + parseInt(dd) + ''
          } else {
            d = date.getDate() + dd + ''
          }
        }

        m = m.length == 1 ? ('0' + m) : m,

          d = d.length == 1 ? ('0' + d) : d

        return y + '-' + m + '-' + d
      },

      mGetDate () {
        var date = new Date()

        var year = date.getFullYear()

        var month = date.getMonth() + 1

        var d = new Date(year, month, 0)

        return d.getDate()
      },

      selectData () { // 打开时间选择器
        this.start()

        // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）

        if (this.selectedValue) {
          this.dateVal = this.selectedValue
        } else {
          this.dateVal = new Date()
        }

        this.$refs['datePicker'].open()
      },

      dateConfirm (v) { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
        let y = this.dateVal.getFullYear() + '',

          m = this.dateVal.getMonth() + 1 + '',

          d = this.dateVal.getDate() + ''

        m = m.length < 2 ? '0' + m : m

        d = d.length < 2 ? '0' + d : d

        this.selectedValue = y + '-' + m + '-' + d

        this.$emit('returnDate', this.selectedValue)
      }

    }

  }
</script>


<style scoped>


</style>

